<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header" style="display: flex;justify-content: space-between;">
          <div  style="display: flex;height:100%;align-items: center;">
            <div class="report_header_left"></div>
            <div class="report_header_query">
              <queryArticle @queryArticleClick='queryArticleClick' :shopname="articleTitle"></queryArticle>
            </div>
          </div>
          <div style="display: flex;">
            <el-button style="margin-left: 10px" size="small" type="primary" @click="loadOrder">查询</el-button>
            <ExportList2Excel ref="exportList2Excel" @handleExport="handleExport"  name="导出" />
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :height="curHeight" :data="tableData" border style="width: 100%;" >
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{scope.$index +1}}</template>
          </el-table-column>
          <el-table-column  label="社区名" width="300" align="center" headerAlign="center" prop="name"/>
          <el-table-column sortable label="人口数" width="120" align="center" headerAlign="center" prop="people"/>
          <el-table-column sortable label="守护人数" width="120" align="center" headerAlign="center" prop="hits"/>
          <el-table-column sortable label="未读人数" width="120" align="center" prop="unreadNumber" headerAlign="center"/>
          <el-table-column align="center" label="查看详情" width="100">
            <template slot-scope="scope">
              <div class="justify_right shop_Height"  @click="clickTr(scope.row)"  v-if="scope.row.id != null">
                <a class="details_Title">查看详情</a>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadOrder"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination';
import ExportList2Excel from "@/components/ExportList2Excel";
import {communityList as memberLists} from '@/api/report'
import queryArticle from '@/components/Query/queryArticle'
import utils from '@/utils/utils'
export default {
  name: 'resultSaleReport-list',
  data() {
    return {
      articleTitle:this.$route.query.articleTitle,
      articleId:this.$route.query.articleId,
      printing:5000,//打印数量设置
      tableData: [],
      curHeight: null,
      pageSize: 20,
      total: 0,
      pageNum: 1,
    }
  },
  created() {
    this.loadOrder()
  },
  components: {
    Pagination,
    ExportList2Excel,
    queryArticle,
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  methods: {
    queryArticleClick(item){
      this.articleId = item.shopId
    },
    clickTr(row, event, column){
      this.clicklook(row)
    },
    clicklook(item){
      this.$router.push({
        path: '/reportForm/apartmentRep',
        query: {
          communityId:item.id,
          communityName:item.name,
          articleId:this.articleId,
          articleTitle:this.articleTitle,
        }
      })
    },
    queryDateClick(data) {
      this.query.beginDate = data.beginDate
      this.query.endDate = data.endDate
    },
    queryOfficeClick(data){
      this.query.officeId = data.officeId
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          _this.curHeight = h - 224 //减去页面上固定高度height
        })();
      };
    },
    comeIn() {
      var h = document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 224 //减去页面上固定高度height
    },
    handleExport() {
      let _this= this
      var  loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let data ={}
      data.tHeader = ['社区名','人口数','守护人数','未读人数']
      data.filterVal = ["name",'people','hits','unreadNumber']
      data.filename = '社区报表';
      var  params=new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize',this.printing),
      params.append('articleId', this.articleId)
      memberLists(params).then(res=>{
        res.data.data.forEach(item=>{
          item.unreadNumber = item.people - item.hits
          item.createDate = utils.dateFormatter(item.createDate)
        })
        data.list=res.data.data
        _this.$refs.exportList2Excel.handleDownload(data);
        loading.close();
        if(data.list.length==this.printing){
          this.pageNum++
          this.handleExport()
        }
        else{
          return;
        }
      }).catch(error=>{
        _this.$refs.exportList2Excel.unlockLoading()
        loading.close();
      })
      _this.$refs.exportList2Excel.handleDownload(data);
    },
    loadOrder() {
      var _this = this
      const params = new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.pageSize)
      params.append('articleId', this.articleId)
      memberLists(params).then(response => {
        response.data.data = response.data.data.filter(function(n){return n});
        response.data.data.forEach(item=>{
          item.unreadNumber = item.people - item.hits
          item.index = response.data.data.indexOf(item);
          item.createDate = utils.dateFormatter(item.createDate)
        })
        _this.total = response.data.total
        _this.tableData = response.data.data
      })
    }
  }
}
</script>

<style scoped>
.details_Title {
  font-size: 14px;
  color: #409EFF;
}
.justify_right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.report_header {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background-color: white;
  display: flex;
  align-items: center;
}


.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
}

.report_header_date {
  box-sizing: border-box;
  margin-left: 10px;
  width: 260px;
}

.report_header_query {
  margin-left: 10px;
  width: 130px;
}


.report_footer_box {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-top: none;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: white;
}

/deep/.el-footer {
  padding: 10px;
  padding-top: 0;
}

.report_footer_box_title {
  margin-left: 10px;
  font-size: 12px;
  font-weight: bold;
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}



.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: white;
}

/deep/.el-table__body tbody .el-table__row:last-child {
  background-color: #F5F7FA;
}

/deep/.el-main {
  padding: 10px;
  padding-bottom: 0;
}

/deep/.el-table--enable-row-transition .el-table__body td {
  border-bottom: none;
}

/deep/.el-table::before {
  height: 0px;
}

/deep/.el-table--border th {
  background-color: rgba(241, 242, 243, 1);
}

/deep/.el-header {
  padding: 10px;
}

/deep/.pagination-container {
  margin-top: 0 !important;
}
</style>
